<template>
  <a-modal
    title="编辑表单"
    width="100%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="()=>{this.visible=false}"
  >
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false">
        <div class="table-operator">
          <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
            <a-row>
              <a-col :span="8">
                <a-form-item label="委外单号">
                  <a-input
                    v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="委外名称">
                  <a-input
                    v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="计划完工日期">
                  <a-input
                    v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-item label="供应商">
                  <a-select
                    v-decorator="[
                      'gender',
                      { rules: [{ required: true, message: 'Please select your gender!' }] },
                    ]"
                    placeholder="Select a option and change input text above"
                    @change="handleSelectChange"
                  >
                    <a-select-option value="male">
                      male
                    </a-select-option>
                    <a-select-option value="female">
                      female
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="备注">
                  <a-input
                    v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-card title="委外商品列表（温馨提示：保存时，系统会根据BOM表自动计算出【所需物料】）">
          <a slot="extra" href="#">添加委外商品</a>
          <a-table
            ref="table"
            :columns="columns"
            :rowKey="row => row.Id"
            :dataSource="data"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :bordered="true"
            size="small"
          >
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleEdit(record.Id)">编辑</a>
                <a-divider type="vertical" />
                <a @click="handleDelete([record.Id])">删除</a>
              </template>
            </span>
          </a-table>
        </a-card>

      </a-card>
    </a-spin>
  </a-modal>
</template>

<script>
const columns = [
  { title: '产品编号', dataIndex: 'Code', width: '10%' },
  { title: '产品名称', dataIndex: 'MaterialName' },
  { title: '型号', dataIndex: 'Model', width: '20%' },
  { title: '规格', dataIndex: 'Spec', width: '30%' },
  { title: '类型', dataIndex: 'MaterialType', width: '10%' }
]

export default {
  components: {
  },
  mounted () {
    this.getDataList()
  },
  data () {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: 'Id', order: 'asc' },
      loading: false,
      columns,
      queryParam: {},
      visible: false,
      selectedRowKeys: []
    }
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    getDataList () {
      this.selectedRowKeys = []
      this.loading = true
      this.$http
        .post('/Aps/Aps_Material/GetDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    hanldleAdd () {
      // this.$refs.editForm.openForm()
    },
    handleEdit (id) {
      // this.$refs.editForm.openForm(id)
    },
    handleDelete (ids) {
      var thisObj = this
      this.$confirm({
        title: '确认删除吗?',
        onOk () {
          return new Promise((resolve, reject) => {
            thisObj.submitDelete(ids, resolve, reject)
          }).catch(() => console.log('Oops errors!'))
        }
      })
    },
    submitDelete (ids, resolve, reject) {
      this.$http.post('/Aps/Aps_Material/DeleteData', ids).then(resJson => {
        resolve()

        if (resJson.Success) {
          this.$message.success('操作成功!')

          this.getDataList()
        } else {
          this.$message.error(resJson.Msg)
        }
      })
    }
  }
}
</script>
